---
title: Decap CMS & Astro
description: Add content to your Astro project using Decap as a CMS
sidebar:
  label: Decap CMS
type: cms
stub: true
logo: decap-cms
i18nReady: true
---
import Grid from '~/components/FluidGrid.astro';
import Card from '~/components/ShowcaseCard.astro';
import { Steps } from '@astrojs/starlight/components';
import { FileTree } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

[Decap CMS](https://www.decapcms.org/) (formerly Netlify CMS) is an open-source, Git-based content management system.

Decap allows you to take full advantage of all of Astro's features, including image optimization and content collections.

Decap adds a route (typically `/admin`) to your project that will load a React app to allow authorized users to manage content directly from the deployed website. Decap will commit changes directly to your Astro project's source repository.

## Installing DecapCMS

There are two options for adding Decap to Astro:

1. [Install Decap via a package manager](https://decapcms.org/docs/install-decap-cms/#installing-with-npm) with the following command:


    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install decap-cms-app
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add decap-cms-app
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add decap-cms-app
      ```
      </Fragment>
    </PackageManagerTabs>
 
 
2. Import the package into a `<script>` tag in your page `<body>`

	```html title='/admin'
    <body>
      <!-- Include the script that builds the page and powers Decap CMS -->
      <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
    </body>
	```
 

## Configuration

<Steps>
1. Create a static admin folder at `public/admin/`

2. Add `config.yml` to `public/admin/`:
    <FileTree>
      - public
        - admin
          - config.yml
    </FileTree>

3. To add support for content collections, configure each schema in `config.yml`. The following example configures a `blog` collection, defining a `label` for each entry's frontmatter property:

    ```yml title="/public/admin/config.yml"
    collections:
      - name: "blog" # Used in routes, e.g., /admin/collections/blog
        label: "Blog" # Used in the UI
        folder: "src/content/blog" # The path to the folder where the documents are stored
        create: true # Allow users to create new documents in this collection
        fields: # The fields for each document, usually in frontmatter
          - { label: "Layout", name: "layout", widget: "hidden", default: "blog" }
          - { label: "Title", name: "title", widget: "string" }
          - { label: "Publish Date", name: "date", widget: "datetime" }
          - { label: "Featured Image", name: "thumbnail", widget: "image" }
          - { label: "Rating (scale of 1-5)", name: "rating", widget: "number" }
          - { label: "Body", name: "body", widget: "markdown" }
    ```

4. Add the `admin` route for your React app in `src/pages/admin.html`.
    <FileTree>
    - public
      - admin
         - config.yml
    - src
      - pages
        - admin.html
    </FileTree>

    ```html title="/src/pages/admin.html" {7, 11}
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="robots" content="noindex" />
        <link href="/admin/config.yml" type="text/yaml" rel="cms-config-url" />
        <title>Content Manager</title>
      </head>
      <body>
        <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
      </body>
    </html>
    ```

5. To enable media uploads to a specific folder via the Decap editor, add an appropriate path:
    ```yml title="/public/admin/config.yml"
    media_folder: "src/assets/images" # Location where files will be stored in the repo 
    public_folder: "src/assets/images" # The src attribute for uploaded media
    ```
</Steps>

See [the Decap CMS configuration documentation](https://decapcms.org/docs/configure-decap-cms/) for full instructions and options.

## Usage
Navigate to `yoursite.com/admin/` to use the Decap CMS editor.

## Authentication

### Decap CMS with Netlify Identity

Decap CMS was originally developed by Netlify and has first class support for [Netlify Identity](https://docs.netlify.com/security/secure-access-to-sites/identity/).

When deploying to Netlify, configure Identity for your project via the Netlify dashboard and include the [Netlify Identity Widget](https://github.com/netlify/netlify-identity-widget) on the `admin` route of your project. Optionally include the Identity Widget on the homepage of your site if you plan to invite new users via email.

### Decap CMS with External OAuth Clients

When deploying to hosting providers other than Netlify, you must create your own OAuth routes.

In Astro, this can be done with on-demand rendered routes in your project configured with [an adapter](/en/guides/on-demand-rendering/) enabled.

See [Decap's OAuth Docs](https://decapcms.org/docs/external-oauth-clients/) for a list of compatible community-maintained OAuth clients.

## Community Resources 

- Netlify Identity Template: [astro-decap-ssg-netlify](https://github.com/OliverSpeir/astro-decap-ssg-netlify-identity)

- On-demand rendering OAuth Routes with Astro Template: [astro-decap-starter-ssr](https://github.com/OliverSpeir/astro-decap-starter-ssr)

- Blog Post: [Author your Astro site's content with Git-based CMSs](https://aalam.vercel.app/blog/astro-and-git-cms-netlify) by Aftab Alam 

- Youtube Tutorial: [Create a Custom Blog with Astro & NetlifyCMS in MINUTES!](https://www.youtube.com/watch?v=3yip2wSRX_4) by Kumail Pirzada

## Production Sites

The following sites use Astro + Decap CMS in production:

- [yunielacosta.com](https://www.yunielacosta.com/) by Yuniel Acosta — [source code on GitHub](https://github.com/yacosta738/yacosta738.github.io) (Netlify CMS)
- [portfolioris.nl](https://www.portfolioris.nl/) by Joris Hulsbosch – [source code on GitHub](https://github.com/portfolioris/portfolioris.nl)

## Themes

<Grid >
  <Card title="Astros" href="https://astro.build/themes/details/astros" thumbnail="astros.png"/>
  <Card title="Enhanced Astro Starter" href="https://astro.build/themes/details/enhanced-astro-starter" thumbnail="enhanced-astro-starter.png"/>
  <Card title="Astro Decap CMS Starter" href="https://astro.build/themes/details/astro-decap-cms-starter" thumbnail="astro-decap-starter.png"/>
</Grid>
